<template>
  <div>
    <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
    <a-alert :message="selectKeyName" type="info" show-icon />
    <a-tree
      :expanded-keys="expandedKeys"
      :auto-expand-parent="true"
      :tree-data="treeData"
      :checkedKeys='selectedKeys'
      @select='onSelect'
    >
    </a-tree>
  </div>
</template>

<script>
import { fetchList } from '@/api/sys/dept'
import { treeDataTranslate } from '@/utils/util'
export default {
  name: 'deptTree',
  data(){
    return {
      treeData: [],
      expandedKeys: [],
      selectedKeys: [],
      selectNode: null
    }
  },
  computed: {
    selectKeyName: function() {
      if(!this.selectedKeys || this.selectedKeys.length === 0){
        return "当前选择:"
      }else{
        return `当前选择：${this.selectNode.title}`

      }
    }
  },
  methods: {
    onChange(){

    },
    init(){
      fetchList().then(res => {
        this.treeData = [{
          key: '0',
          value: '0',
          title: '全部用户'
        }]
        this.treeData.push(...treeDataTranslate(res.data, 'id', 'name'))
      })
    },
    // 点击节点
    onSelect(selectedKeys,{selected, selectedNodes, node, event}){
      this.selectedKeys = selectedKeys
      if(selectedKeys && selectedKeys.length > 0){
        this.selectNode = selectedNodes[0].data.props
      }else {
        this.selectNode = null
      }
      this.$emit("select",selectedKeys)

    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>

</style>